
<!DOCTYPE HTML PUBLIC "-//W3C//DTD -//W3C//DTD HTML 4.01//EN//EN" "">
<%@page import="comparator.SortByEndDate"%>
<%@page import="com.tecnick.htmlutils.htmlentities.HTMLEntities"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.text.DateFormat"%>
<%@ page contentType="text/html; charset=utf-8" %>
<%@page import="controller.Controller"%>
<%@ page import="java.util.*,dataBase.*"%>
<%@page import="com.google.appengine.api.datastore.Key"%>
<%@page import="sessionMenegment.SessionMgr"%>
<%@page import="language.LangFactory"%>
<%@page import="language.LangIntrf"%>
<%@page import="model.HistoryLog"%>
<%@page import="com.google.appengine.repackaged.org.json.JSONObject"%>
<%@page import="util.Util"%>
<%
	SessionMgr sessionMgr = SessionMgr.getInst();
	boolean user = sessionMgr.checkUser(request,session);
	if(!user)
		response.sendRedirect("home.jsp");
%>
<%
	LangFactory langFactory= new LangFactory();
	String langName = request.getParameter("lang");
	LangIntrf lang =null;
	if(langName!=null){
		lang = langFactory.getLang(request.getParameter("lang"));
		session.setAttribute("lang",langName);
	}
	else
		lang = langFactory.getLang((String)session.getAttribute("lang"));
	String langSign = lang.getLang();
	
	
%>
<html>

	<head>
		<link rel="icon" href="../images/synca.png" type="image/x-icon"/> 
		<link rel="shortcut icon" href="../images/synca.png" type="image/x-icon"/>
		<link href="../style.css" rel="stylesheet" type="text/css" />
		<link href="../e.css" rel="stylesheet" type="text/css" />
		<link href="../css/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" />
		<link href="../try3.css" rel="stylesheet" type="text/css" />
<link href="http://dl.dropbox.com/u/22035932/jPicker-1.1.6.min.css" type="text/css"  rel="stylesheet" />
<link href="http://dl.dropbox.com/u/22035932/jPicker.css" type="text/css" rel="stylesheet" />
        <% 
        	
    	Controller controller2 = Controller.getInstance();
    	Business business2 =  controller2.getBiz((String)session.getAttribute("userNameBusiness"));
    	if(business2==null){
    		response.sendRedirect("home.jsp");
    	}
    	String border = business2.getBorderColor();
    	String background = business2.getBackground();
    	String messageBG = business2.getSecBackground();
         	
        	if (border!=null && background!=null && messageBG!=null ){
        %>
        
        <style type="text/css">
        	.formButton2{
        		border:solid 2px <%=border%>;
        		background-color: <%=messageBG%>;
        		color:#000;
        	}
        	<!-----  style.css  ----->
        	body {
        		background-color: <%=background%>;
        	}
        	#container {
        		background-color: <%=background%>;
        	}
        	#header {
        		background-color: <%=messageBG%>;
        		border-bottom: solid 2px <%=border%>;
        	}
        	#headerLogedIn{
        		background-color: <%=messageBG%>;
        		border-bottom: solid 2px <%=border%>;
        	}
        	#headerLogedIn #logo{
        		color: <%=background%>;
        	}
        	.menu_nav li,.menu_nav_logedIn li {
        		background-color: <%=background%>;
        		border:solid 2px <%=border%>;
        	}
        	#left_sidebar {
        		background-color: <%=background%>;
        	}
        	#left_sidebar button{
        		color:<%=background%>;
        		background-color: <%=messageBG%>;
        		border:solid 2px <%=border%>;
        	}
        	
        	.control_bar {
        		background-color: <%=background%>;
        	}
        	#main_content{
        		background-color: <%=background%>;
        	}
        	#footer {
        		background-color: <%=messageBG%>;
        		border-top: solid 2px <%=border%>;
        	}
        	#stylized .formButton{
        		color:<%=background%>;
        		background-color: <%=messageBG%>;
        		border:solid 2px <%=border%>;
        	}
        	#stylized{
        		background:<%=background%>;
        		border:solid 2px <%=border%>;
        	}
        	#messageBox{
        		background-color: <%=background%>;
        		border: solid 2px <%=border%>;
        		
        	}
        	#messageBox button{
        		color:<%=background%>;
        		background-color: <%=messageBG%>;
        		border:solid 2px <%=border%>;
        	}
        	.menu_nav {
        		background-color:<%=messageBG%>;
        	}
        	.menu_nav_logedIn {
        		background-color:<%=messageBG%>;
        	}
        	.side_buttons li {
        		background-color: <%=messageBG%>;
        		border:solid 2px <%=border%>;
        	}
        	.list{
        		border: solid 2px <%=messageBG%>;
        	}
        	#left_sidebar form{
        		border:solid 2px <%=border%>;
        	}
        	.list{
        		border: solid 2px <%=border%>;
        	}
        	
        	
        	/*-----  e.css  -----*/
        	
        	
        	.statusChange{
        		background-color: <%=background%>;
        		border:solid 2px <%=border%>;
        	}
        	.heading {
        		background-color:<%=messageBG%>;
        	}
        	.wraper {
        		background-color:<%=messageBG%>;
        		border-color: <%=border%>;
        	}
        	.content {
        		background-color:<%=messageBG%>;
        	}
        	.currentStatus {
        		border:solid 2px <%=border%>;
        	}
        	
        </style>
        <%} %>
        <script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
        
        <script type="text/javascript" src="../jquery.tools.min.js"></script>
        
		        <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="../js/jquery-ui-1.8.20.custom.min.js"></script>
		
        <script type="text/javascript" src="../jquery.address-1.4.min.js"></script>
        
        <script src="../javascript/jpicker-1.1.6.min.js" type="text/javascript"></script>
     
		<title>Synca</title>
		 <%
		 	Controller controller = Controller.getInstance();
		 	String bizName = (String)session.getAttribute("userNameBusiness");
		 	Business business = controller.getBiz(bizName);
		 %>
		
        <script>
			jQuery(document).ready(
				function() {
					
					$.fn.jPicker.defaults.images.clientPath='../images/';
					$("#myform2").submit(function() {
						addItemsToForm();
					}); 
					$.address.history(false).strict(false).change(function(event){																	
						var tab = event.value;									
						(tab=='board' || tab=='') ? visiableMain('board') : hiddenMain('board');
						(tab=='activeOrders') ? visiableMain('activeOrders') : hiddenMain('activeOrders');
						(tab=='avgTime') ? visiableMain('avgTime') : hiddenMain('avgTime');
						(tab=='totalOrders') ? visiableMain('totalOrders') : hiddenMain('totalOrders');
						(tab=='adCount') ? visiableMain('adCount') : hiddenMain('adCount');

						
   					}).history(true);
					$("#logOut").click(function(){
							$.post("logOutBusiness",function(){$(location).attr('href','home.jsp');});
					});
					$("#profile").click(function(){
						$.post("myProfileBusiness",function(){$(location).attr('href','myProfileBusiness2.jsp');});
				    });
					$("#closeBox").click(function(){
							$(this).parent().slideUp(500);
					});
					$("#newOrder").click(function(){
							$("#messageBox").slideToggle(500);
					});
					$("#newOrderButton").click(function(){
							$("#messageBox").slideToggle(500);
					});
					// Example 1.2: Sortable and connectable lists
					$('#example-1-2 .sortable-list').sortable({
						connectWith: '#example-1-2 .sortable-list'
					});

					  $(".content").hide();
					  $(".arrow").click(function()
					  {
						  changeDivContent("statusDiv",$(this).parent());
					  });
					  $(".message").click(function()
					  {
						  changeDivContent("messageDiv",$(this).parent());
						  });
					  $(".cogWheel").click(function()
					  {
						  changeDivContent("settingDiv",$(this).parent());				
					  });
					  
					  $(".exit").click(function(){
						  	$(this).parent().hide(500);
					  });
					  $("#terminal").click(function(){
						  window.location.href = "allOrders.jsp";
					  });
					  $(".statusChange").click(function ()
					 {
						  elem = $(this).parent().parent().parent().find("#orderId").val();
							  $.post("changeStatusBusiness", {orderID: elem,newStatus:$(this).val()}, function() {
								  $(location).attr('href','allOrders.jsp');
								  changeStatus($(this).html('il'),$(this).parent().parent());
								  },"html");
							  
							  
					 });
					  $('#pickColor1').jPicker({
				          window:{
				            expandable: true,
				            position:	{x: 'screenCenter', y: '-450'},
							liveUpdate: true},
			 		   	color:
			           				{alphaSupport: true,
			             			 	active: new $.jPicker.Color({ ahex: '<%= business.getBackground()%>' })
			           				}
				          
					});
					$('#pickColor2').jPicker({
				          window:{
				            expandable: true,
				            position:	{x: 'screenCenter', y: '-450'},
							liveUpdate: true},
			 		   	color:
			           				{alphaSupport: true,
			             			 	active: new $.jPicker.Color({ ahex: '<%= business.getSecBackground()%>' })
			           				}
				          
					});
					$('#pickColor3').jPicker({
				          window:{
				            expandable: true,
				            position:	{x: 'screenCenter', y: '-450'},
							liveUpdate: true},
			 		   	color:
			           				{alphaSupport: true,
			             			 	active: new $.jPicker.Color({ ahex: '<%= business.getBorderColor()%>' })
			           				}
				          
					});
					$("#sortable1").sortable();
					order = $("#sortable1").sortable('serialize',{attribute:'name'});
					$("#sortable1").disableSelection();
					$("#sortable2").sortable();
					order = $("#sortable2").sortable('serialize',{attribute:'name'});
					$("#sortable2").disableSelection();
					
					var background = ['f5f5f5','ffaaaa','bfffaa','ffffff'];
					var messageBG = ['6699cc','ff5656', 'aced21', '8d967b'];
					var border = ['3366cc','ff0000', '0b8205', '000000'];
					
					 $("#pageColorSelect").change(function(){
							var pos = $(this).val();
							$.jPicker.List[0].color.active.val('hex', background[pos], this);
							$.jPicker.List[1].color.active.val('hex', messageBG[pos], this);
							$.jPicker.List[2].color.active.val('hex', border[pos], this);

							
						});
					 $("#preview").click(function(){
					 	window.open('http://syncahore.appspot.com/preview.jsp?background='+$.jPicker.List[0].color.active.val("hex")+'&messageBG='+$.jPicker.List[1].color.active.val('hex')+'&border='+$.jPicker.List[2].color.active.val('hex'));
					 });
					  changeStatus = function(val,elem){
						  
					  }
					  changeDivContent = function(divName,elem){
						//  confirm(divName);
							if(divName=='settingDiv'){
								openDiv('settingDiv',elem)
						//		confirm("if");
					  		}
							else{
								
								closeDiv('settingDiv',elem);
							//	confirm("else");
							}
						//	confirm("xfx");
					  		(divName=='messageDiv') ? openDiv('messageDiv',elem) : closeDiv('messageDiv',elem);
					  		
							(divName=='statusDiv') ? openDiv('statusDiv',elem) : closeDiv('statusDiv',elem);
					  }
					  
					  openDiv = function(divName1,elem){
						  
						  elem.find('#'+divName1).attr('class','content');
						//  confirm("1");
						  //if(elem.find('#'+divName1).is(':not(:visiable)')){  
						//	  confirm("3");
							  elem.find('#'+divName1).slideToggle(500);	  
					//	  }
						//  confirm("2");
						  return true;
					  }
					  
					  closeDiv = function(divName,elem){
						  elem.find('#'+divName).attr('class','hiddenMain');
					//	  if(elem.find('#'+divName).is(':visiable')){
							  elem.find('#'+divName).hide(500);	  
					//	  }
						  return true;
					  }
					
				}
			);
			var getSortOrder = function(){
				var x='';
				$.each($("#sortable").sortable('toArray'), function(index,value){
						x=x+'index '+index+': '+value+'\n';
					});
				return x;
			 }
			var addItemsToForm = function(){
				/* $.each($("#sortable1").sortable('toArray'), function(index,value){
					addHiddenInput('#myform2','list_'+index,value);
					}); */
				$("#sortable1 li").each(function(index,value){
					addHiddenInput('#myform2','list_'+index,this.getAttribute('value'));
				});
				$("#sortable2 li").each(function(index,value){
					addHiddenInput('#myform2','message_'+index,this.getAttribute('value'));
				});
				/* $.each($("#sortable2").sortable('toArray'), function(index,value){
					addHiddenInput('#myform2','message_'+index,value);
				}); */
				addHiddenInput('#myform2','background','#'+$.jPicker.List[0].color.active.val("hex"));
				addHiddenInput('#myform2','secBackground','#'+$.jPicker.List[1].color.active.val("hex"));
				addHiddenInput('#myform2','borderColor','#'+$.jPicker.List[2].color.active.val("hex"));
				
		
			 } 
			 var addHiddenInput = function(formName,attName,attVal){
				 $('<input />').attr('type', 'hidden')
		            .attr('name', attName)
		            .attr('value', attVal)
		            .appendTo(formName);
			 }
			 var removeItem = function(x){
				 //alert("asdasd "+x);
				 $(x).remove();
				 
			 }
			 var liIndex=0;
			 var addItem = function(identifier,sortable){
				 if($("#"+identifier).val()!=''){
				 	$("#"+sortable).append('<li id="list_'+sortable+liIndex+'" value="list_'+$("#"+identifier).val().replace(/ /g,'@')+'">'+$("#"+identifier).val()+'   <a href="" onclick="removeItem(list_'+sortable+liIndex+'); return false;">     remove</a></li>');
				 	$("#"+identifier).val('');
				 }
			 }
			var visiableMain = function(tab){
				
				$('#main_content #'+tab).attr('class','');
				$('#menu #'+tab).attr('class','choosenButton');
			}
			
			var hiddenMain = function(tab){
				
				$("#main_content #"+tab).attr('class','hiddenMain');
				$('#menu #'+tab).attr('class','');
			}
	
				


			


		</script>
        
	</head>

	<body>
<div id="container">
		
		<div id="headerLogedIn">

        <div class="menu_nav_logedIn menu_nav_logedIn2">
            <ul id="menu">
            	<li id="terminal"><%=lang.getTERMINAL_BUTTON() %></li>
                <li id="profile"><%=lang.getMT_PROFILE_BUTTON() %></li>
                <li id="logOut"><%=lang.getLOG_OUT_BUTTON() %></li>
            </ul>
        </div>	
        	
		</div>

		<div id="left_sidebar">
			<img src="../showImage?imageKey=<%=business.getUserName() %>"  width="150" />
            <div class="side_buttons">
                
        	</div>
		</div>
			
<div id="main_content"> 
 <center>
 <b><h1><%=lang.getCLOSED_ORDERS_LABEL() %></h1></b>
 <br/>
    <table class="historyTable" dir="<%=lang.getDirection()%>" border="1" cellpadding="0" cellspacing="0" >
    <tr align="center">
    	<td><%=lang.getORDER_ID_CLOSED_LABEL() %></td>   	
    	<td><%=lang.getPHONE_CLOSED_LABEL() %></td>
    	<td><%=lang.getEMAIL_CLOSED_LABEL() %></td>
    	<td><%=lang.getDETAILS_CLOSED_LABEL() %></td>
    	<td><%=lang.getSTART_TIME_CLOSED_LABEL() %></td>
    	<td><%=lang.getEND_TIME_CLOSED_LABEL() %></td>
    	<td><%=lang.getDURATION_CLOSED_LABEL() %></td>
    	<td><%=lang.getPRINT_CLOSED_LABEL() %></td>   	
    </tr>
    <%
    List<Order> orders = controller.getNotAvailableOrdersOfBiz(business);
    Collections.sort(orders,SortByEndDate.getInstance().getDateComparator());
    for(Order order : orders){
    	long duration = order.getEndTime().getTime()-order.getStartTime().getTime();
    	
    %>
    <tr>
    	<td><%=order.getOrderNum() %></td>
    	<td><%=order.getPhoneNumber().getNumber() %></td>
    	<td><%=order.getEmail() %></td>
    	<td style="max-width: 200px;word-wrap: break-word;"><%=order.getDetails() %></td>
    	<td><%=order.getStartTimeFormat() %></td>
    	<td><%=order.getEndTimeFormat() %></td>
    	<td><%=Util.getTime(duration,Util.Times.DAYS) %> <%=lang.getDAYS_LABEL() %>,   <%=Util.getTime(duration,Util.Times.HOURS) %> <%=lang.getHOURS_LABEL() %>,    <%=Util.getTime(duration,Util.Times.MINUTES) %> <%=lang.getMINUTES_LABEL() %></td>
    	<td><a href="print.jsp?orderNum=<%=order.getOrderNum()%>" target="#"><img src="../images/printer4.png"></a></td>
    </tr>
    <%} %>
    </table>
 </center>

	<div class="clearer">&nbsp;</div>
</div>	


		<div id="footer">
	<a href="closedOrders.jsp?lang=he"><img src="../images/hebrew.gif" width="30px" style="float: left; margin-top: 0.5%; margin-left: 0.5%;"/></a>
	<a href="closedOrders.jsp?lang=en"><img src="../images/english.gif" width="30px" style="float: left; margin-top: 0.5%;margin-left: 0.5%;"/></a>

<center>
		<p><%=lang.getCOPY_RIGHT_LABEL()%> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;               
			<a href="home.jsp"><%=lang.getHOME_BUTTON()%></a> &nbsp;&nbsp;| &nbsp;&nbsp;
			<a href="home.jsp#customers"><%=lang.getCONTACT_BUTTON()%></a> &nbsp;&nbsp;|&nbsp;&nbsp;
			<a href="home.jsp?#about"><%=lang.getABOUT_BUTTON()%></a>
		</p>
		</center>
	</div>
</div>


	</body>

</html>
